<template>
  <!-- 查看其他绿地信息对话框 -->
  <el-dialog
    :title="title"
    :visible.sync="visible"
    @close="dialogClosed"
    width="950px"
    append-to-body
    v-dialogDrag
  >
    <!-- 基础信息 -->
    <el-row>
      <el-col :span="24" class="title-row" :style="{ color: theme }">
        <span>| 详细信息</span>
      </el-col>
      <el-col :span="24">
        <el-row>
          <el-descriptions
            :column="2"
            border
            :contentStyle="contentStyle"
            :labelStyle="labelStyle"
          >
            <el-descriptions-item>
              <template slot="label"> OBJECTID </template>
              {{ this.form.objectid }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 标识码 </template>
              {{ this.form.objcode }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 名称 </template>
              {{ this.form.objname }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 绿地所属大类 </template>
              <dict-tag
                :options="dict.type.sys_greenland_type"
                :value="this.form.type"
              />
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 绿地所属中类 </template>
              <dict-tag
                :options="dict.type.sys_greenland_type_m"
                :value="this.form.type_m"
              />
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">绿地所属小类</template>
              <dict-tag
                :options="dict.type.sys_greenland_type_s"
                :value="this.form.type_s"
              />
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 占地面积(㎡) </template>
              {{ this.form.zhandmj }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 树种 </template>
              <dict-tag
                :options="dict.type.sys_greenland_treetype"
                :value="this.form.treenum"
              />
              <!-- {{ this.form.treenum }} -->
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 胸径(cm) </template>
              {{ this.form.dist }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 所属行政区 </template>
              {{ this.form.suosxzq }}</el-descriptions-item
            >
            <el-descriptions-item>
              <template slot="label"> 所属街道 </template>
              {{ this.form.suosjd }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 所属社区 </template>
              {{ this.form.suossq }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 所属街道 </template>
              {{ this.form.suosjd }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 主管部门名称 </template>
              {{ this.form.deptname }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 权属单位名称 </template>
              {{ this.form.qsmcname }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 养护单位名称 </template>
              {{ this.form.yhmcname }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 采集时间 </template>
              {{ this.localDate(this.form.collectdate) }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 更新时间 </template>
              {{ this.localDate(this.form.updatedate) }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 数据来源 </template>
              {{ this.form.datasource }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 备注 </template>
              {{ this.form.note }}
            </el-descriptions-item>
          </el-descriptions>
        </el-row></el-col
      >
    </el-row>
    <el-row>
      <el-col :span="24" class="title-row">
        <span>| 现场照片资料（检查/整改）</span>
      </el-col>
      <el-col :span="24">
        <template v-if="picFileList.length !== 0">
          <el-image
            style="width: 100px; height: 100px; margin: 10px"
            v-for="(pic, index) in picFileList"
            :key="index"
            :src="pic"
            :preview-src-list="picFileList"
          >
          </el-image>
        </template>
        <div
          v-if="picFileList.length == 0"
          style="margin: 10px; text-align: center"
        >
          暂无照片
        </div>
      </el-col>
    </el-row>

    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">关 闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
import AttachmentQuery from "@arcgis/core/rest/support/AttachmentQuery";
export default {
  dicts: [
    "sys_greenland_type",
    "sys_greenland_type_m",
    "sys_greenland_type_s",
    "sys_greenland_treetype",
  ],
  data() {
    return {
      picFileList: [],
      tableData: [],
      // 内容样式
      contentStyle: {
        "text-align": "left",
        "min-width": "320px", //最小宽度
        "word-break": "break-all", //过长时自动换行
      },
      // label样式
      labelStyle: {
        // width: "100px",
        "text-align": "left",
        // "min-width": "120px",
        "background-color": "#e7f6f3",
      },
      activeName: "first",
      title: null,
      // 当前行数据
      rowFormData: null,
      // 遮罩层
      visible: false,
      // 修改表单参数
      form: {},
      // 查询图层
      featureLayer: null,
    };
  },
  created() {},
  mounted() {
    // this.initEditable();
  },
  methods: {
    // 显示弹框
    show() {
      var _self = this;
      _self.form = _self.rowFormData;
      console.log(_self.rowFormData);
      _self.visible = true;
      _self.getAttachment();
    },

    columnStyle({ row, column, rowIndex, columnIndex }) {
      if (columnIndex == 0) {
        return "background:rgb(28 133 195 / 20%);";
      }
    },

    // 监听添加用户对话框的关闭事件
    dialogClosed() {},
    cancel() {
      this.visible = false;
    }, // 标签切换
    handleClick() {
      //
    },
    // 格式化日期
    localDate(time) {
      if (time == null) return "";
      var localTime = this.$moment.parseZone(time).local().format("YYYY-MM-DD");
      //   console.log(localTime);
      return localTime;
    },
    // 查询附件
    getAttachment() {
      let _self = this;
      _self.picFileList = [];
      let objectid = _self.rowFormData.objectid;
      const attachmentQuery = new AttachmentQuery({
        objectIds: [objectid],
        // attachmentsWhere: `objectid = ${objectid}` // attachment queries
      });
      _self.featureLayer
        .queryAttachments(attachmentQuery)
        .then((attachments) => {
          console.log(attachments);
          if (attachments[objectid]) {
            let attachment = attachments[objectid];
            attachment
              .forEach((item) => {
                _self.picFileList.push(item.url);
              })
              .catch(function (error) {
                console.log("attachment query error", error);
              });
          }
        });
    },
  },
};
</script>
<style lang="scss" scoped>
.title-row {
  width: 100%;
  font-size: 18px;
  font-weight: bold;
  color: #409eff;
  //margin-bottom: 15px;
}

::v-deep .el-dialog__body {
  padding: 20px;
}

//隐藏对话框表头
::v-deep .el-dialog__header {
  //display: none;
}

//::v-deep .el-descriptions__header {
// margin-bottom: 10px;
//}

::v-deep .el-descriptions__header {
  margin-bottom: 5px;
}

::v-deep .el-descriptions__title {
  font-size: 15px;
  color: #409eff;
}
</style>
